import React, { useState } from 'react';
import './App.css';

function App() {
  const [height, setHeight] = useState('');
  const [weight, setWeight] = useState('');
  const [age, setAge] = useState('');
  const [dietPreference, setDietPreference] = useState('');
  const [recipes, setRecipes] = useState([]);

  const handleSubmit = (e) => {
    e.preventDefault();
    fetch('http://localhost:5000/api/submit', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({
        height,
        weight,
        age,
        dietPreference,
      }),
    })
      .then((response) => response.json())
      .then((data) => {
        setRecipes(data.recommendedRecipes);
      });
  };

  return (
    <div className="App">
      <h1>健康饮食建议平台</h1>
      <form onSubmit={handleSubmit}>
        <div>
          <label>身高（cm）：</label>
          <input
            type="number"
            value={height}
            onChange={(e) => setHeight(e.target.value)}
          />
        </div>
        <div>
          <label>体重（kg）：</label>
          <input
            type="number"
            value={weight}
            onChange={(e) => setWeight(e.target.value)}
          />
        </div>
        <div>
          <label>年龄：</label>
          <input
            type="number"
            value={age}
            onChange={(e) => setAge(e.target.value)}
          />
        </div>
        <div>
          <label>饮食偏好：</label>
          <select
            value={dietPreference}
            onChange={(e) => setDietPreference(e.target.value)}
          >
            <option value="vegan">纯素</option>
            <option value="vegetarian">素食</option>
            <option value="non-vegetarian">非素食</option>
          </select>
        </div>
        <button type="submit">提交</button>
      </form>
      <div>
        <h2>推荐菜谱</h2>
        {recipes.map((recipe, index) => (
          <div className="recipe" key={index}>
            <h3>{recipe.name}</h3>
            <p>{recipe.description}</p>
            <p>营养成分: {recipe.nutrition}</p>
          </div>
        ))}
      </div>
    </div>
  );
}

export default App;